.NotificationTestActions {
    position: absolute;
    right: 140px;
    margin-top: 9px;

    .TestAction {
        flex: 1;
        display: flex;
        color: $light-blue;
        font-size: 0.75rem;
        font-weight: 600;
        justify-content: flex-start;
        align-items: center;
    }

    @mixin StatusColor($color) {
        color: $color;

        * {
            color: $color;
        }
    }

    .Status {
        @extend .TestAction;

        flex-direction: row;
        color: #FFFFFF;

        i {
            color: #FFFFFF;
            font-size: 1.6rem;
            margin-right: 14px;
        }

        span.StatusText {
            font-weight: 600;
        }

        span.Label {
            font-weight: 300;
        }

        span.StatusCode {
            font-weight: 600;
        }

        span.ViewTestResults {
            color: $light-blue;
            font-style: italic;
            transition: all 0.3s;

            &:hover {
                cursor: pointer;
                color: darken($light-blue, 10%);
            }
        }
    }

    .Status.Success {
        @include StatusColor($green);
    }

    .Status.Error {
        @include StatusColor($red);
    }

    .Status.Warning {
        @include StatusColor($yellow);
    }

    .Status.InActive {
        @include StatusColor($grey);
    }

    .ToggleDetails {
        @extend .TestAction;

        &:hover {
            cursor: pointer;
        }
    }
}

.ReposLegend {
    background-color: $dark-blue;
    border-radius: 3px 3px 0px 0px;
    display: flex;
    flex-direction: row;
    color: white;
    padding: 10px 20px;
    font-size: 0.75rem;
    font-weight: 600;
}

.RepoList {
    margin: 0px;

    a {
        transition: all 0.3s;

        &:nth-of-type(2n - 1) {
            background-color: $light-grey;

            &:hover {
                background-color: lighten($light-grey, 2%);
            }
        }

        &:nth-of-type(2n) {
            background-color: $dark-grey;

            &:hover {
                background-color: lighten($dark-grey, 2%);
            }
        }
    }

    .RepoItem {
        padding: 14px;
        transition: all 0.3s;

        .UnknownDetails {
            color: $grey;
            font-size: 0.75rem;
            justify-content: center;
        }

        .Inside {
            .ProviderIcon {
                height: 28px;
                width: 28px;
                border: 0px;
                outline: 0px;
                margin-right: 11px;
            }

            .RepoName {
                font-size: 0.75rem;
                font-weight: 900;
                color: $light-blue;
            }

            .RepoProvider {
                font-size: 0.75rem;
                font-weight: 400;
                color: $grey;
            }

            .Label {
                font-weight: 400;
                font-size: 0.75rem;
                color: $black;
            }

            .LastPushed {
                font-weight: 400;
                font-size: 0.75rem;
                color: $grey;
            }

            .LastWebhookStatus {
                font-size: 0.75rem;
                font-weight: 900;
                color: $green;
            }
        }
    }
}